diff --git a/web/apps/app-listing.react.js b/web/apps/app-listing.react.js
--- a/web/apps/app-listing.react.js
+++ b/web/apps/app-listing.react.js
@@ -13,6 +13,7 @@
 } from 'lib/reducers/enabled-apps-reducer';
 import type { SupportedApps } from 'lib/types/enabled-apps';
 
+import Button from '../components/button.react';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './apps.css';
 
@@ -52,18 +53,14 @@
         </div>
       );
     }
-    const iconClasses = classnames(
-      css.appListingIcon,
-      css.appListingIconState,
-      {
-        [css.iconEnabled]: enabled,
-        [css.iconDisabled]: !enabled,
-      },
-    );
+    const iconClasses = classnames(css.appListingIconState, {
+      [css.iconEnabled]: enabled,
+      [css.iconDisabled]: !enabled,
+    });
     return (
-      <div className={iconClasses} onClick={switchAppState}>
+      <Button className={iconClasses} onClick={switchAppState}>
         <FontAwesomeIcon icon={enabled ? faCheckCircle : faPlusCircle} />
-      </div>
+      </Button>
     );
   }, [enabled, readOnly, switchAppState]);
   return (
diff --git a/web/apps/apps.css b/web/apps/apps.css
--- a/web/apps/apps.css
+++ b/web/apps/apps.css
@@ -46,7 +46,8 @@
   align-items: center;
 }
 
-div.appListingIconState {
+.appListingIconState {
+  padding: 0 20px;
   font-size: var(--xl-font-20);
 }
 
@@ -54,10 +55,10 @@
   color: var(--app-list-icon-read-only-color);
 }
 
-div.iconEnabled {
+.iconEnabled {
   color: var(--app-list-icon-enabled-color);
 }
 
-div.iconDisabled {
+.iconDisabled {
   color: var(--app-list-icon-disabled-color);
 }
diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -34,10 +34,7 @@
   flex-grow: 1;
 }
 
-div.closeSearch {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+.closeSearch {
   color: var(--thread-creation-close-search-color);
   margin: 0 8px;
 }
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -174,9 +174,9 @@
             placeholder="Select users for chat"
           />
         </div>
-        <div className={css.closeSearch} onClick={onCloseSearch}>
+        <Button className={css.closeSearch} onClick={onCloseSearch}>
           <SWMansionIcon size={25} icon="cross" />
-        </div>
+        </Button>
       </div>
       {tagsList}
       {userSearchResultList}
diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js
--- a/web/chat/chat-thread-list-item-menu.react.js
+++ b/web/chat/chat-thread-list-item-menu.react.js
@@ -6,6 +6,7 @@
 import useToggleUnreadStatus from 'lib/hooks/toggle-unread-status';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
+import Button from '../components/button.react';
 import { useThreadIsActive } from '../selectors/nav-selectors';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './chat-thread-list-item-menu.css';
@@ -59,14 +60,14 @@
   });
   return (
     <div className={menuCls} onMouseLeave={hideMenu}>
-      <button onClick={toggleMenu}>
+      <Button onClick={toggleMenu}>
         <SWMansionIcon icon="menu-vertical" size={menuIconSize} />
-      </button>
+      </Button>
       <div>
-        <button className={btnCls} onClick={onToggleUnreadStatusClicked}>
+        <Button className={btnCls} onClick={onToggleUnreadStatusClicked}>
           <SWMansionIcon className={css.mailIcon} icon="mail" size={18} />
           {toggleUnreadStatusButtonText}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/clear-search-button.react.js b/web/components/clear-search-button.react.js
--- a/web/components/clear-search-button.react.js
+++ b/web/components/clear-search-button.react.js
@@ -4,6 +4,7 @@
 import * as React from 'react';
 
 import SWMansionIcon from '../SWMansionIcon.react';
+import Button from './button.react';
 import css from './search.css';
 
 type ClearSearchButtonProps = {
@@ -17,9 +18,9 @@
     [css.clearSearchDisabled]: !active,
   });
   return (
-    <button className={searchClassNames} onClick={onClick}>
+    <Button className={searchClassNames} onClick={onClick}>
       <SWMansionIcon icon="cross" size={12} />
-    </button>
+    </Button>
   );
 }
 
diff --git a/web/components/label.css b/web/components/label.css
--- a/web/components/label.css
+++ b/web/components/label.css
@@ -7,10 +7,6 @@
 }
 
 button.close {
-  display: flex;
-  align-items: center;
   margin-left: 4px;
-  background: transparent;
-  border: none;
   color: inherit;
 }
diff --git a/web/components/label.react.js b/web/components/label.react.js
--- a/web/components/label.react.js
+++ b/web/components/label.react.js
@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import SWMansionIcon from '../SWMansionIcon.react';
+import Button from './button.react';
 import css from './label.css';
 
 type Props = {
@@ -36,9 +37,9 @@
       return null;
     }
     return (
-      <button className={css.close} onClick={onClose}>
+      <Button className={css.close} onClick={onClose}>
         <SWMansionIcon icon="cross" size={size} />
-      </button>
+      </Button>
     );
   }, [onClose, size]);
 
diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js
--- a/web/components/menu-item.react.js
+++ b/web/components/menu-item.react.js
@@ -4,6 +4,7 @@
 import * as React from 'react';
 
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
+import Button from './button.react';
 import css from './menu.css';
 
 type MenuItemProps = {
@@ -19,13 +20,14 @@
   const itemClasses = classNames(css.menuAction, {
     [css.menuActionDangerous]: dangerous,
   });
+
   return (
-    <button className={itemClasses} onClick={onClick}>
+    <Button className={itemClasses} onClick={onClick ? () => onClick() : null}>
       <div className={css.menuActionIcon}>
         <SWMansionIcon size="100%" icon={icon} />
       </div>
       <div>{text}</div>
-    </button>
+    </Button>
   );
 }
 
diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -35,14 +35,10 @@
 button.menuAction {
   color: inherit;
   z-index: 1;
-  background-color: transparent;
   padding: 12px 16px;
   line-height: 1.5;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
   font-size: inherit;
+  justify-content: start;
 }
 
 button.menuAction:hover {
diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -30,10 +30,8 @@
 button.clearSearch {
   color: var(--search-clear-color);
   transition: ease-in-out 0.15s;
-  border: none;
   background: var(--search-clear-bg);
   border-radius: 50%;
-  display: flex;
   padding: 6px;
 }
 
diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js
--- a/web/components/tabs-header.js
+++ b/web/components/tabs-header.js
@@ -3,10 +3,11 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
+import Button from './button.react';
 import css from './tabs.css';
 
 type Props<T: string> = {
-  +children?: React.Node,
+  +children: React.Node,
   +isActive: boolean,
   +setTab: T => mixed,
   +id: T,
@@ -19,9 +20,9 @@
   });
   const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]);
   return (
-    <div className={headerClasses} onClick={onClickSetTab}>
+    <Button className={headerClasses} onClick={onClickSetTab}>
       {children}
-    </div>
+    </Button>
   );
 }
 
diff --git a/web/components/tabs.css b/web/components/tabs.css
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -6,26 +6,25 @@
   max-height: 100%;
   flex: 1;
 }
+
 div.tabsHeaderContainer {
   display: flex;
 }
 
-div.tabHeader {
+.tabHeader {
   flex: 1;
   padding: 16px;
-  display: flex;
-  justify-content: center;
+  font-size: var(--m-font-16);
   color: var(--tabs-header-active-color);
   border-bottom: 2px solid var(--tabs-header-active-border);
 }
 
-div.backgroundTabHeader {
-  cursor: pointer;
+.backgroundTabHeader {
   color: var(--tabs-header-background-color);
   border-bottom-color: var(--tabs-header-background-border);
 }
 
-div.backgroundTabHeader:hover {
+.backgroundTabHeader:hover {
   color: var(--tabs-header-background-color-hover);
   border-bottom-color: var(--tabs-header-background-border-hover);
 }
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -9,22 +9,18 @@
   position: relative;
   vertical-align: top;
 }
-span.multimedia > span.multimediaImage {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+span.multimedia > .multimediaImage {
   position: relative;
   min-height: 50px;
   min-width: 50px;
 }
-span.multimedia > span.multimediaImage > img {
+span.multimedia > .multimediaImage > img {
   max-height: 200px;
   max-width: 100%;
 }
-span.multimedia > span.multimediaImage > svg.removeUpload {
+span.multimedia > .multimediaImage svg.removeUpload {
   display: none;
   position: absolute;
-  cursor: pointer;
   top: 3px;
   right: 3px;
   color: white;
@@ -32,7 +28,7 @@
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   background-color: rgba(34, 34, 34, 0.67);
 }
-span.multimedia:hover > span.multimediaImage > svg.removeUpload {
+span.multimedia:hover > .multimediaImage svg.removeUpload {
   display: inherit;
 }
 span.multimedia > svg.uploadError {
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -10,6 +10,7 @@
   AlertCircle as AlertCircleIcon,
 } from 'react-feather';
 
+import Button from '../components/button.react';
 import { type PendingMultimediaUpload } from '../input/input-state';
 import { useModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
@@ -70,7 +71,9 @@
 
       if (remove) {
         removeButton = (
-          <XCircleIcon onClick={this.remove} className={css.removeUpload} />
+          <Button onClick={this.remove}>
+            <XCircleIcon className={css.removeUpload} />
+          </Button>
         );
       }
     }
@@ -84,13 +87,13 @@
     const containerClasses = [css.multimedia, this.props.multimediaCSSClass];
     return (
       <span className={classNames(containerClasses)}>
-        <span
+        <Button
           className={classNames(imageContainerClasses)}
           onClick={this.onClick}
         >
           <img src={this.props.uri} />
           {removeButton}
-        </span>
+        </Button>
         {progressIndicator}
         {errorIndicator}
       </span>
@@ -108,9 +111,7 @@
     remove(pendingUpload.localID);
   };
 
-  onClick: (event: SyntheticEvent<HTMLSpanElement>) => void = event => {
-    event.stopPropagation();
-
+  onClick: () => void = () => {
     const { pushModal, uri } = this.props;
     pushModal(<MultimediaModal uri={uri} />);
   };
diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -4,6 +4,7 @@
 
 import type { UserListItem } from 'lib/types/user-types';
 
+import Button from '../../components/button.react';
 import css from './add-members.css';
 
 type AddMembersItemProps = {
@@ -36,14 +37,14 @@
   }, [canBeAdded, userAdded, userInfo.alertTitle]);
 
   return (
-    <button
+    <Button
       className={css.addMemberItem}
       onClick={onClickCallback}
       disabled={!canBeAdded}
     >
       <div className={css.label}>{userInfo.username}</div>
       <div className={css.label}>{action}</div>
-    </button>
+    </Button>
   );
 }
 
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
--- a/web/modals/components/add-members.css
+++ b/web/modals/components/add-members.css
@@ -5,14 +5,9 @@
 }
 
 button.addMemberItem {
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  align-items: center;
   color: var(--add-members-item-color);
   font-size: var(--l-font-18);
-  background-color: transparent;
-  border: none;
   width: 100%;
 }
 
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -29,13 +29,11 @@
   width: 500px;
 }
 
-span.modalClose {
-  display: flex;
+.modalClose {
   color: var(--modal-close-color);
 }
 
-span.modalClose:hover {
-  cursor: pointer;
+.modalClose:hover {
   color: var(--modal-close-color-hover);
 }
 
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
+import Button from '../components/button.react';
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
 
@@ -70,9 +71,9 @@
       return null;
     }
     return (
-      <span className={css.modalClose} onClick={onClose}>
+      <Button className={css.modalClose} onClick={onClose}>
         <SWMansionIcon size={24} icon="cross" />
-      </span>
+      </Button>
     );
   }, [onClose, withCloseButton]);
 
diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
--- a/web/modals/threads/color-selector-button.css
+++ b/web/modals/threads/color-selector-button.css
@@ -1,15 +1,11 @@
-div.container {
+.container {
   height: 48px;
   width: 48px;
   border-radius: 24px;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  display: flex;
 }
 
-div.active,
-div.container:hover {
+.active,
+.container:hover {
   background-color: var(--color-selector-active-bg);
 }
 
diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import tinycolor from 'tinycolor2';
 
+import Button from '../../components/button.react';
 import css from './color-selector-button.css';
 
 type ColorSelectorButtonProps = {
@@ -31,9 +32,9 @@
   }, [onColorSelection, color]);
 
   return (
-    <div onClick={onColorSplotchClicked} className={containerClassName}>
+    <Button onClick={onColorSplotchClicked} className={containerClassName}>
       <div className={css.colorSplotch} style={colorSplotchStyle} />
-    </div>
+    </Button>
   );
 }
 
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -6,6 +6,7 @@
 import { getMessagePreview } from 'lib/shared/message-utils';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
+import Button from '../../../components/button.react';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
 import { useSelector } from '../../../redux/redux-utils';
 import { useOnClickThread } from '../../../selectors/nav-selectors';
@@ -58,7 +59,7 @@
   }, [lastActivity, mostRecentMessageInfo, threadInfo]);
 
   return (
-    <button className={css.sidebarContainer} onClick={onClickThread}>
+    <Button className={css.sidebarContainer} onClick={onClickThread}>
       <img
         className={css.sidebarArrow}
         src={
@@ -72,7 +73,7 @@
         <div className={css.longTextEllipsis}>{threadInfo.uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>
       </div>
-    </button>
+    </Button>
   );
 }
 
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
--- a/web/modals/threads/sidebars/sidebars-modal.css
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -18,13 +18,10 @@
 }
 
 button.sidebarContainer {
-  cursor: pointer;
-  display: flex;
   padding: 0 16px;
   column-gap: 8px;
   align-items: flex-start;
   width: 100%;
-  border: none;
   font-size: inherit;
   text-align: inherit;
   line-height: inherit;
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -6,6 +6,7 @@
 import { getMessagePreview } from 'lib/shared/message-utils';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
+import Button from '../../../components/button.react';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
 import { useSelector } from '../../../redux/redux-utils';
 import { useOnClickThread } from '../../../selectors/nav-selectors';
@@ -62,13 +63,13 @@
   }, [lastActivity, mostRecentMessageInfo, threadInfo]);
 
   return (
-    <div className={css.subchannelContainer} onClick={onClickThread}>
+    <Button className={css.subchannelContainer} onClick={onClickThread}>
       <SWMansionIcon icon="message-square" size={22} />
       <div className={css.subchannelInfo}>
         <div className={css.longTextEllipsis}>{threadInfo.uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>
       </div>
-    </div>
+    </Button>
   );
 }
 
diff --git a/web/modals/threads/subchannels/subchannels-modal.css b/web/modals/threads/subchannels/subchannels-modal.css
--- a/web/modals/threads/subchannels/subchannels-modal.css
+++ b/web/modals/threads/subchannels/subchannels-modal.css
@@ -2,8 +2,6 @@
   display: flex;
   flex-direction: column;
   overflow: auto;
-  line-height: var(--line-height-text);
-  color: var(--subchannels-modal-color);
   row-gap: 8px;
   width: 383px;
   height: 458px;
@@ -13,14 +11,16 @@
   text-align: center;
 }
 
-div.subchannelContainer {
-  cursor: pointer;
-  display: flex;
+.subchannelContainer {
+  align-items: flex-start;
+  font-size: var(--m-font-18);
+  line-height: var(--line-height-text);
+  color: var(--subchannels-modal-color);
   padding: 8px 16px;
   column-gap: 8px;
 }
 
-div.subchannelContainer:hover {
+.subchannelContainer:hover {
   color: var(--subchannels-modal-color-hover);
 }
 
@@ -33,6 +33,7 @@
 }
 
 div.longTextEllipsis {
+  align-self: flex-start;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/web/modals/threads/thread-picker-modal.css b/web/modals/threads/thread-picker-modal.css
--- a/web/modals/threads/thread-picker-modal.css
+++ b/web/modals/threads/thread-picker-modal.css
@@ -12,12 +12,16 @@
 
 div.threadPickerOptionContainer {
   display: flex;
-  align-items: center;
+}
+
+.threadPickerOptionButton {
+  flex: 1;
+  justify-content: left;
   padding: 12px 16px;
-  cursor: pointer;
+  font-size: var(--m-font-16);
 }
 
-div.threadPickerOptionContainer:hover {
+.threadPickerOptionButton:hover {
   background-color: var(--thread-hover-bg);
   border-radius: 8px;
 }
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -8,6 +8,7 @@
 import { onScreenEntryEditableThreadInfos } from 'lib/selectors/thread-selectors';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
+import Button from '../../components/button.react';
 import Search from '../../components/search.react';
 import { useSelector } from '../../redux/redux-utils';
 import Modal, { type ModalOverridableProps } from '../modal.react';
@@ -35,13 +36,14 @@
   );
 
   return (
-    <div
-      key={threadInfo.id}
-      className={css.threadPickerOptionContainer}
-      onClick={onClickThreadOption}
-    >
-      <div style={splotchColorStyle} className={css.threadSplotch} />
-      <div className={css.threadNameText}>{threadInfo.uiName}</div>
+    <div key={threadInfo.id} className={css.threadPickerOptionContainer}>
+      <Button
+        className={css.threadPickerOptionButton}
+        onClick={onClickThreadOption}
+      >
+        <div style={splotchColorStyle} className={css.threadSplotch} />
+        <div className={css.threadNameText}>{threadInfo.uiName}</div>
+      </Button>
     </div>
   );
 }
diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -4,6 +4,7 @@
 
 import type { AccountUserInfo } from 'lib/types/user-types.js';
 
+import Button from '../../components/button.react';
 import css from './add-users-list.css';
 
 type Props = {
@@ -18,10 +19,10 @@
     userInfo.id,
   ]);
   return (
-    <button className={css.addUserButton} onClick={addUser}>
+    <Button className={css.addUserButton} onClick={addUser}>
       <div className={css.addUserButtonUsername}>{userInfo.username}</div>
       Add
-    </button>
+    </Button>
   );
 }
 
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -20,15 +20,11 @@
 }
 
 .addUserButton {
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
   padding: 16px;
   color: var(--relationship-modal-color);
   font-size: var(--l-font-18);
   line-height: var(--line-height-display);
-  background: transparent;
-  border: none;
 }
 
 .addUserButtonUsername {
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -6,6 +6,7 @@
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 
+import Button from '../../components/button.react';
 import MenuItem from '../../components/menu-item.react';
 import Menu from '../../components/menu.react';
 import SWMansionIcon from '../../SWMansionIcon.react';
@@ -19,12 +20,17 @@
   const buttons = React.useMemo(() => {
     if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
       return (
-        <button
-          className={classnames([css.button, css.destructive])}
+        <Button
+          variant="text"
+          className={classnames(css.button)}
+          buttonColor={{
+            backgroundColor: 'transparent',
+            color: 'var(--btn-bg-danger)',
+          }}
           onClick={unfriendUser}
         >
           Cancel request
-        </button>
+        </Button>
       );
     }
     if (
@@ -32,15 +38,20 @@
     ) {
       return (
         <>
-          <button className={css.button} onClick={friendUser}>
+          <Button variant="text" className={css.button} onClick={friendUser}>
             Accept
-          </button>
-          <button
-            className={classnames([css.button, css.destructive])}
+          </Button>
+          <Button
+            variant="text"
+            className={classnames(css.button)}
+            buttonColor={{
+              backgroundColor: 'transparent',
+              color: 'var(--btn-bg-danger)',
+            }}
             onClick={unfriendUser}
           >
             Reject
-          </button>
+          </Button>
         </>
       );
     }
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -24,14 +24,6 @@
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
   color: var(--btn-bg-filled);
-  cursor: pointer;
-  background: none;
-  border: none;
-  white-space: nowrap;
-}
-
-.destructive {
-  color: var(--btn-bg-danger);
 }
 
 .edit_menu {